
import { Card, Flex, Rate } from "@/components/base";
import { Typography } from "@/components/typography";
import styles from './index.module.less';

const { Text } = Typography;

/** 最近使用记录 */
export function UsageHistory() {
    return (
        <Card>
            <Text size={18} strong style={{ marginBottom: 12, display: 'block', alignItems: 'center' }}>
                最近使用记录
            </Text>
            <Flex vertical gap={16}>
                <UsageRecordItem
                    customerName="张小美"
                    rating={5}
                    date="2025-01-01"
                    therapist="小李"
                />

                <UsageRecordItem
                    customerName="张小美"
                    rating={5}
                    date="2025-01-01"
                    therapist="小李"
                />

                <UsageRecordItem
                    customerName="张小美"
                    rating={5}
                    date="2025-01-01"
                    therapist="小李"
                />
            </Flex>
        </Card>
    )
}

function UsageRecordItem(props: {
    customerName: string;
    rating: number;
    date: string;
    therapist: string;
}) {
    const { customerName, rating, date, therapist } = props;
    return (
        <Flex vertical className={styles['usage-record-item']} >
            <Flex gap={4}>
                <Text strong>{customerName}</Text>
                <Rate  value={rating} style={{ fontSize: 10 }}  />
            </Flex>
            <Text size={12} type='secondary'>{date} | 护理师：{therapist}</Text>
            <Text size={12}>反馈：服务很好，下次还会再来</Text>
        </Flex>
    );
}